<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
<template>
    <div>
      <el-form ref="form" :model="form" label-width="100px" :inline="true">
          <el-form-item class="select">
            <el-select v-model="form.phoneType">
              <el-option label="中国大陆+86" value="中国大陆+86"></el-option>
              <el-option label="区域二" value="区域二"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.cellphone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item class="codeStyle">
            <el-input v-model="form.authCode"  style="width:225px" placeholder="请获取验证码"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary">获取验证码</el-button>
          </el-form-item>
          <el-form-item  >
            <el-input v-model="form.password"
            style="width:350px" placeholder="密码(6-10位字母与数字组合)"></el-input>
          </el-form-item>
          <el-form-item  >
            <el-input v-model="form.passwordTwo"
            style="width:350px" placeholder="重新输入密码"></el-input>
          </el-form-item>
          <el-form-item  >
            <el-input v-model="form.username"
            style="width:350px" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" style="width:350px" round>注册</el-button>
          </el-form-item>
      </el-form>
      <div>
          <span>已有账号</span>
          <span class="goLogin" @click="$router.push('/login')">立即登录</span>
      </div>
      <ul class="toolLogin">
          <li class="weixin"></li>
          <li class="weibo"></li>
          <li class="qq"></li>
      </ul>
    </div>
  </template>

<script>
export default {
  data() {
    return {
      form: {
        phoneType: '中国大陆+86',
        cellphone: '',
        authCode: '',
        password: '',
        passwordTwo: '',
        username: '',
      },
    };
  },
};
</script>

  <style scoped lang="less">
  .select {
      width: 135px;
  }

  .codeStyle {
      width: 224px;
  }

  .goLogin {
      margin-left: 10px;
      color: #409eff;
  }

  .toolLogin {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 350px;
      li {
          margin-left: 8px;
          margin-right: 8px;
          width: 32px;
          height: 32px;
      }
      .weixin {
          background-image: url('../assets/web_wecha.png');
      }

      .weibo {
          background-image: url('../assets/web_weibo.png');
      }

      .qq {
          background-image: url('../assets/web_qq.png');
      }
  }
  </style>
